<div class="forms-wrap">
    <!-- 基础信息 START -->
    <h3>基本信息</h3>

    <!-- 采购单号 -->
    <nz-form-item *ngIf="!routeParams.type && routeParams.id > 0">
        <nz-form-label
            nz-col>
            采购单号
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <input type="text" placeholder="采购单号" nz-input [(ngModel)]="formDatas.purchaseNumber" [disabled]="true">
        </nz-form-control>
    </nz-form-item>

    <!-- 计划单 -->
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            计划单
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择计划单"
                [disabled]="routeParams.id > 0"
                [(ngModel)]="formDatas.purchase.applyNumber"
                (ngModelChange)="planSheepChange($event)">
                <nz-option
                    *ngFor="let item of planSheetLists"
                    [nzLabel]="item.billNo"
                    [nzValue]="item.billNo">
                </nz-option>
            </nz-select>
        </nz-form-control>
        <p class="tip-p">重新选择以后，采购内容会被清空，计划单内容会重新加载</p>
    </nz-form-item>

    <!-- 供应商 -->
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            供应商
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择供应商"
                [(ngModel)]="formDatas.purchase.partyB">
                <nz-option
                    *ngFor="let item of supplierLists"
                    [nzLabel]="item.name"
                    [nzValue]="item.id">
                </nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
  
    <!-- 备注 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            备注
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-textarea-count [nzMaxCharacterCount]="100">
                <textarea
                    class="textarea-cont"
                    nz-input
                    maxlength="100"
                    placeholder="仅内部可见"
                    [(ngModel)]="formDatas.purchase.remark">
                </textarea>
            </nz-textarea-count>
        </nz-form-control>
    </nz-form-item>
    <!-- 基础信息 END -->
  
    <!-- 采购详情 START -->
    <h3 class="title-h">采购详情</h3>
    
    <!-- tables -->
    <div class="table-wrap">
        <!-- 计划单table TOP START -->
        <div class="table-item">
            <button nz-button nzType="link" class="all-btn" [disabled]="!planSheetTables.length" (click)="selectAll(0)">全部采购</button>
            <nz-table
                #topTable
                [nzLoading]="planTableLoading"
                [nzData]="planSheetTables"
                nzBordered
                nzSize="small"
                nzTitle="{{ formDatas.purchase.applyNumber ? '以下是计划单【' + formDatas.purchase.applyNumber + '】的所有内容' : '请选择计划计划单' }}"
                [nzShowPagination]="false"
                [nzScroll]="{ x: '1200px', y: '650px' }"
                [nzWidthConfig]="nzWidthConfig">
                <thead>
                    <tr>
                        <th rowspan="2" nzLeft>序号</th>
                        <th colspan="4">商品信息</th>
                        <th colspan="5">计划单信息</th>
                        <th colspan="4">本次采购信息</th>
                        <th rowspan="2" nzAlign="center" nzRight>操作</th>
                    </tr>
                    <tr>
                        <th nzAlign="center">商品编号</th>
                        <th nzAlign="center">商品名称</th>
                        <th nzAlign="center">商品69码</th>
                        <th nzAlign="center">标准采购价(含税)</th>
                        <th nzAlign="center">期望交货日期</th>
                        <th nzAlign="center">最迟交货日期</th>
                        <th nzAlign="center">计划数量</th>
                        <th nzAlign="center">已采购数量</th>
                        <th nzAlign="center">冻结数量</th>
                        <th nzAlign="center">交货日期</th>
                        <th nzAlign="center">采购数量</th>
                        <th nzAlign="center">采购单价(含税)</th>
                        <th nzAlign="center">小计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of planSheetTables; let index = index;">
                        <!-- 序号 -->
                        <td nzAlign="center" nzLeft>{{ index + 1 }}</td>
                        <!-- 商品编号 -->
                        <td nzAlign="center">{{ data.id }}</td>
                        <!-- 商品名称 -->
                        <td nzAlign="center" nzBreakWord>{{ data.name || '-' }}</td>
                        <!-- 商品69码 -->
                        <td nzAlign="center">{{ data.code || '-' }}</td>
                        <!-- 标准采购价(含税) -->
                        <td nzAlign="center">{{ '￥' + (data.standardCostPrice | number : '0.4-4' )}}</td>
                        <!-- 期望交货日期 -->
                        <td nzAlign="center">{{ data.deliveryTime | date: 'yyyy-MM-dd' }}</td>
                        <!-- 最迟交货日期 -->
                        <td nzAlign="center">{{ data.endDeliveryTime | date: 'yyyy-MM-dd' }}</td>
                        <!-- 计划数量 -->
                        <td nzAlign="center">{{ data.planNumber }}</td>
                        <!-- 已采购数量 -->
                        <td nzAlign="center">{{ data.purchasedNumber }}</td>
                        <!-- 冻结数量 -->
                        <td nzAlign="center">{{ data.frozenNumber }}</td>
                        <!-- 交货日期 -->
                        <td nzAlign="center">-</td>
                        <!-- 采购数量 -->
                        <td nzAlign="center">-</td>
                        <!-- 采购单价(含税) -->
                        <td nzAlign="center">-</td>
                        <!-- 小计 -->
                        <td nzAlign="center">-</td>
                        <!-- 操作 -->
                        <td nzAlign="center" nzRight>
                            <button
                                *ngIf="data.state == 0 || data.state == 3"
                                nz-button
                                nz-button-tdlink
                                nzType="link"
                                [disabled]="data.maxPurchasedNumber <= 0 && !backupSelectedTables.includes(data.planId)"
                                (click)="singleChoice(data, index)">
                                {{ data.isShow == 0 ? '采购' : '取消采购' }}
                            </button>
                            <button
                                *ngIf="data.state == 1 || data.state == 2"
                                nz-button
                                nz-button-tdlink
                                nzType="link"
                                [disabled]="data.state == 1 || data.state == 2">
                                {{ state_to_text(data.state) }}
                            </button>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
        <!-- 计划单table TOP END -->

        <!-- 本次采购table START -->
        <div *ngIf="selectedTables.length > 0" class="table-item">
            <button nz-button nzType="link" class="all-btn" [disabled]="!selectedTables.length" (click)="selectAll(1)">清空已选</button>
            <nz-table
                #bottomTable
                [nzData]="selectedTables"
                nzBordered
                nzSize="small"
                nzTitle="以下是本次要采购的内容"
                [nzShowPagination]="false"
                [nzScroll]="{ x: '1200px', y: '650px' }"
                [nzWidthConfig]="nzWidthConfig">
                <thead>
                    <tr>
                        <th rowspan="2" nzLeft>序号</th>
                        <th colspan="4">商品信息</th>
                        <th colspan="5">计划单信息</th>
                        <th colspan="4">本次采购信息</th>
                        <th rowspan="2" nzAlign="center" nzRight>操作</th>
                    </tr>
                    <tr>
                        <th nzAlign="center">商品编号</th>
                        <th nzAlign="center">商品名称</th>
                        <th nzAlign="center">商品69码</th>
                        <th nzAlign="center">标准采购价(含税)</th>
                        <th nzAlign="center">期望交货日期</th>
                        <th nzAlign="center">最迟交货日期</th>
                        <th nzAlign="center">计划数量</th>
                        <th nzAlign="center">已采购数量</th>
                        <th nzAlign="center">冻结数量</th>
                        <th nzAlign="center">交货日期</th>
                        <th nzAlign="center">采购数量</th>
                        <th nzAlign="center">采购单价(含税)</th>
                        <th nzAlign="center">小计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of selectedTables; let index = index;">
                        <!-- 序号 -->
                        <td nzAlign="center" nzLeft>{{ index + 1 }}</td>
                        <!-- 商品编号 -->
                        <td nzAlign="center">{{ data.planId }}</td>
                        <!-- 商品名称 -->
                        <td nzAlign="center" nzBreakWord>{{ data.name || '-' }}</td>
                        <!-- 商品69码 -->
                        <td nzAlign="center">{{ data.code || '-' }}</td>
                        <!-- 标准采购价(含税) -->
                        <td nzAlign="center">{{ '￥' + (data.standardCostPrice | number : '0.4-4' )}}</td>
                        <!-- 期望交货日期 -->
                        <td nzAlign="center">{{ data.deliveryTime | date: 'yyyy-MM-dd' }}</td>
                        <!-- 最迟交货日期 -->
                        <td nzAlign="center">{{ data.endDeliveryTime | date: 'yyyy-MM-dd' }}</td>
                        <!-- 计划数量 -->
                        <td nzAlign="center">{{ data.planNumber }}</td>
                        <!-- 已采购数量 -->
                        <td nzAlign="center">{{ data.purchasedNumber }}</td>
                        <!-- 冻结数量 -->
                        <td nzAlign="center">{{ data.planFrozenNumber || data.frozenNumber }}</td>
                        <!-- 交货日期 -->
                        <td nzAlign="center">
                            <nz-date-picker
                                [(ngModel)]="data.deliveryTime"
                                nzFormat="yyyy-MM-dd HH:mm"
                                [nzShowTime]="{ nzFormat: 'HH:mm' }">
                            </nz-date-picker>
                        </td>
                        <!-- 采购数量 -->
                        <td nzAlign="center">
                            <nz-input-number
                                [nzId]="'orderAddID' + index"
                                [(ngModel)]="data.purchaseNumber"
                                [nzMin]="1"
                                [nzMax]="((data.planNumber || 0) - (data.purchasedNumber || 0) - (data.planFrozenNumber || 0)) || 0"
                                (keydown)="onKeydownEnter($event, index)"
                                (nzBlur)="onBlurCountNum()">
                            </nz-input-number>
                        </td>
                        <!-- 采购单价(含税) -->
                        <td nzAlign="center">
                            <nz-input-number
                                [nzId]="'orderPriceID' + index"
                                [(ngModel)]="data.purchasePrice"
                                [nzMin]="0.0001" [nzPrecision]="4"
                                (keydown)="onKeydownPriceEnter($event, index)">
                            </nz-input-number>
                        </td>
                        <!-- 小计 -->
                        <td nzAlign="center">
                            <ng-container *ngIf="data.purchaseNumber && data.purchasePrice">
                                {{ '￥' + (data.purchaseNumber * data.purchasePrice | number : '0.4-4')}}
                            </ng-container>
                            <ng-container *ngIf="!data.purchaseNumber && !data.purchasePrice">
                                -
                            </ng-container>
                        </td>
                        <!-- 操作 -->
                        <td nzAlign="center" nzRight>
                            <button nz-button nzType="link" (click)="singleChoice(data, index)">取消采购</button>
                        </td>
                    </tr>
                    <!-- 合计 -->
                    <tr *ngIf="selectedTables?.length > 0">
                        <td nzAlign="center" nzLeft>合计</td>
                        <td nzAlign="center" colSpan="9"></td>
                        <td nzAlign="center">
                            <nz-date-picker
                                nzFormat="yyyy-MM-dd HH:mm"
                                [nzShowTime]="{ nzFormat: 'HH:mm' }"
                                [(ngModel)]="formDatas.deliveryTime"
                                nzPlaceHolder="批量修改日期"
                                (nzOnOk)="onTableChangeTime($event, 'deliveryTime')">
                            </nz-date-picker>
                        </td>
                        <td nzAlign="center">{{ formDatas.countTotal }}</td>
                        <td nzAlign="center" colSpan="2"></td>
                        <td nzAlign="center" nzRight>-</td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
        <!-- 本次采购table END -->
    </div>
    <!-- 采购详情 END -->
  
    <!-- footer -->
    <div class="footer-wrap">
        <nz-divider></nz-divider>
        <div class="foot-btns">
            <button
                nz-button
                class="foot-bt"
                nzType="primary"
                [nzLoading]="formDatas.examineLoading"
                (click)="preserData(1)">
                保存(审核)
            </button>
            <button
                nz-button
                nzType="dashed"
                class="foot-bt"
                [nzLoading]="formDatas.draftLoading"
                (click)="preserData(0)">
                保存(草稿)
            </button>
            <app-bt-group
                btType="default"
                btText="返回">
            </app-bt-group>
        </div>
    </div>
</div>